<template>
	<view class="page">
		<u-navbar autoBack :fixed="true" :placeholder="true" :border="false">
			<template #center>
				<u-text align="center" suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx" :text="studentInfo.name"
					size="32rpx" color="#333" @click="show = !show" v-if="classType == 1"></u-text>
				<u-text align="center" suffixIcon="arrow-down-fill" iconStyle="margin-left: 10rpx"
					:text="`${studentInfo.name}-考勤`" size="32rpx" color="#333" @click="show = !show"
					v-if="classType == 2"></u-text>
			</template>
		</u-navbar>
		<view class="menu-box" v-if="classType == 1">
			<view class="menu-item" :class="{ active: item.value === currentMenu }" v-for="item in menuList" :key="item.value"
				@click="handleMenuClick(item)">
				<image :src="`/static/image/teacher/${item.icon}${item.value === currentMenu ? '-active' : ''}.png`"
					mode="aspectFit" style="width: 48rpx; height: 48rpx;">
				</image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="main padding-0">
			<!-- 考勤 -->
			<StudentDuty v-if="currentMenu === 1" />

			<!-- 作业 -->
			<StudentHomework v-if="currentMenu === 2" />

			<!-- 错题 -->
			<WrongQuestion v-if="currentMenu === 3" />

			<!-- 诊断日报 -->
			<StudentDaily v-if="currentMenu === 4" />

			<!-- 学员下拉列表 -->
			<PopupBox :show="show" :top="40" @close="show = false">
				<u-cell-group>
					<u-cell :title="item.name" :value="item.value" v-for="item in studentList" :key="item.value"></u-cell>
				</u-cell-group>
			</PopupBox>
		</view>
		<view class="footer gap bg-white margin-top" v-if="currentMenu === 4">
			<u-button size="large" shape="circle" type="info" text="预览" @click="handleConfirm"></u-button>
			<u-button size="large" shape="circle" :color="themePrimary" text="提交并推送" @click="handleConfirm"></u-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import StudentDuty from './components/StudentDuty.vue';
import StudentHomework from './components/StudentHomework.vue';
import WrongQuestion from './components/WrongQuestion.vue';
import StudentDaily from './components/StudentDaily.vue';
import PopupBox from '@/components/PopupBox/index.vue';
import { useTheme } from '@/composables/useTheme';
const { themePrimary } = useTheme();

const currentMenu = ref(1);//当前菜单
const classType = ref(1);//班级类型
//菜单列表
const menuList = ref([
	{
		name: '考勤',
		value: 1,
		icon: 'icon-classroom-duty'
	}, {
		name: '作业',
		value: 2,
		icon: 'icon-classroom-homework'
	},
	{
		name: '错题',
		value: 3,
		icon: 'icon-classroom-mistakes'
	},
	{
		name: '诊断日报',
		value: 4,
		icon: 'icon-classroom-daily'
	}
])
const studentInfo = ref({
	name: '张三',
})
const studentList = ref([
	{
		name: '张三',
		value: '请上传作业'
	},
	{
		name: '李四',
		value: '请确认签到状态'
	},
	{
		name: '王五',
		value: '请生成日报'
	},
	{
		name: '赵六',
		value: '请上传作业'
	},
	{
		name: '赵六',
		value: '请拍照错题'
	},
	{
		name: '赵六',
		value: '请假'
	}
])
const show = ref(false)

// 菜单切换
const handleMenuClick = (item) => {
	currentMenu.value = item.value;
}

onLoad((options) => {
	classType.value = options.classType;
})

</script>

<style lang="scss" scoped>
.menu-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
	padding: 24rpx 32rpx;

	.menu-item {
		padding: 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		margin-top: 30rpx;
		flex: 1;

		&.active {
			background: #0060E6;
			color: white;
		}
	}
}

.popup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-height: 40vh;
	overflow: auto;
	border-radius: 0 0 30rpx 30rpx;
	z-index: 99;
	background: white;
}

.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}


.time-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: solid 1px #D8D8D8;
	padding: 20rpx;
	margin-top: 30rpx;
}
</style>
